<template>
  <div class="container">
    <div class="questions-container">
      <el-card>
        <div class="btn-wrapper">
          <span class="text">说明:目前支持学科和关键字条件筛选</span>
          <el-button type="success" icon="el-icon-edit" size="small" @click="$router.push('/questions/new')">新增试题</el-button>
        </div>
        <!-- 表单下拉框 -->
        <el-form ref="formRef" :model="form" label-width="80px" size="small" style="margin-left: 20px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="学科" style="100%" prop="subjectID">
                <el-select @change="ChangeAllList" v-model="form.subjectID" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in subjectList" :key="item.id" :label="item.label" :value="item.value"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="二级目录" prop="catalogID">
                <el-select v-model="form.catalogID" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in catalogList" :key="item.id" :label="item.label" :value="item.value"> </el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="标签" prop="tags">
                <el-select v-model="form.tags" placeholder="标签" style="width: 100%">
                  <el-option @change="ChangeAllList" v-for="item in tagsList" :key="item.id" :label="item.label" :value="item.value"> </el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="关键字" prop="keyword"> <el-input v-model="form.keyword" placeholder="根据题干搜索"></el-input> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="试题类型" prop="questionType">
                <el-select v-model="form.questionType" placeholder="请选择" style="width: 100%">
                  <el-option v-for="(item, index) in questionType" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="难度" prop="difficulty">
                <el-select v-model="form.difficulty" style="width: 100%">
                  <el-option v-for="(item, index) in difficulty" :key="index" :label="item.label" :value="item.value"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="方向" prop="direction">
                <el-select v-model="form.direction" placeholder="请选择" style="width: 100%">
                  <el-option v-for="(item, index) in direction" :key="index" :label="item" :value="item"></el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="录入人" prop="creatorID">
                <el-select v-model="form.creatorID" placeholder="请选择" style="width: 100%">
                  <el-option v-for="item in userList" :key="item.id" :label="item.username" :value="item.id"> </el-option>
                </el-select> </el-form-item
            ></el-col>
            <el-col :span="6">
              <el-form-item label="题目备注" prop="remarks">
                <el-input v-model="form.remarks"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="企业简称" prop="shortName">
                <el-input v-model="form.shortName" placeholder=""></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="城市" prop="province">
                <el-select @change="changeProvince" v-model="form.province" placeholder="请选择" style="width: 48%">
                  <el-option v-for="item in cityData.province" :key="item.id" :label="item" :value="item"></el-option>
                </el-select>
                <el-select v-model="form.city" placeholder="请选择" style="width: 48%; margin-right: 4%">
                  <el-option v-for="item in cityData.city" :key="item.id" :label="item" :value="item"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="float: right">
                <el-button size="mini" @click="reset">清除</el-button>
                <el-button type="success" size="mini" @click="search">搜索</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <!-- 表格,条数,分页, -->
        <div>
          <template>
            <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="全部" name="all"></el-tab-pane>
              <el-tab-pane label="待审核" name="0"></el-tab-pane>
              <el-tab-pane label="已审核" name="1"></el-tab-pane>
              <el-tab-pane label="已拒绝" name="2"></el-tab-pane>
            </el-tabs>
          </template>
          <!-- 条数 -->
          <el-alert style="margin-bottom: 15px" :title="`数据一共${total}条`" type="info" show-icon :closable="false"> </el-alert>
          <!-- 表格 -->
          <template>
            <el-table :data="tableData" :header-cell-style="headerStyle" :row-style="{ height: '68px', width: '100% ' }">
              <el-table-column prop="number" label="试题编号" width="120px"> </el-table-column>
              <el-table-column prop="subject" label="学科" width="120px"> </el-table-column>
              <el-table-column prop="catalog" label="目录" width="120px"> </el-table-column>
              <el-table-column prop="questionType" label="题型" width="160px">
                <template #default="{ row }">
                  {{ questionChoise[row.questionType] }}
                </template>
              </el-table-column>
              <el-table-column label="题干" width="280px">
                <template #default="{ row }">
                  <p v-html="row.question"></p>
                </template>
              </el-table-column>
              <el-table-column label="录入时间" width="120px">
                <template #default="{ row }">
                  {{ FormData(row.addDate) }}
                </template>
              </el-table-column>
              <el-table-column prop="difficulty" label="题库难度" width="120px">
                <template #default="{ row }">
                  {{ difficultyChoise[row.difficulty] }}
                </template>
              </el-table-column>
              <el-table-column prop="creator" label="录入人" width="120px"> </el-table-column>
              <el-table-column prop="chkState" label="审核状态" width="80px">
                <template #default="{ row }">
                  {{ chkStateChoise[row.chkState] }}
                </template>
              </el-table-column>
              <el-table-column prop="chkRemarks" label="审核意见" width="150px">
                <template #default="{ row }">
                  <p v-html="row.chkRemarks"></p>
                </template>
              </el-table-column>
              <el-table-column prop="chkUser" label="审核人" width="120px"> </el-table-column>
              <el-table-column label="发布状态" width="150px">
                <template #default="{ row }">
                  <div v-if="row.publishState == 0 && row.chkState == 1">已下架</div>
                  <div v-else-if="row.publishState == 1">已发布</div>
                  <div v-else>待发布</div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200px" align="center">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="previewDialog(scope.row.id)">预览</el-button>
                  <el-button type="text" size="small" :class="{ disabled: scope.row.chkState !== 0 }" :disabled="scope.row.chkState !== 0" @click="getchoiceCheck(scope.row)">审核</el-button>
                  <el-button type="text" size="small" @click="$router.push(`/questions/new?id=${scope.row.id}`)">修改</el-button>
                  <el-button type="text" size="small" @click="getchoicePublish(scope.row, scope.row.id)">
                    {{ !scope.row.publishState ? '上架' : '下架' }}
                  </el-button>
                  <el-button type="text" size="small" @click="remove(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
          <question-table></question-table>
          <!-- 分页 -->
          <el-pagination
            style="text-align: right; margin: 20px 50px 0 0"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="params.page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="params.pagesize"
            layout="prev,pager,next,sizes,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </el-card>
      <!-- 试题预览弹框 -->
      <question-preview :rousePreview="rousePreview" @close="rousePreview = false" :datas="datas"></question-preview>

      <!-- 审核弹框 -->
      <question-check :visible="checkVisible" @close="closeDialog" :questionItem="questionItem"></question-check>
    </div>
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { simple as getSubjectsimple } from '@/api/hmmm/subjects'
import { choice as getQuestion, remove, choicePublish, detail } from '@/api/hmmm/questions'
import { simple as getcatalogSimple } from '@/api/hmmm/directorys'
import { simple as getTagsSimple } from '@/api/hmmm/tags'
import { citys, provinces } from '@/api/hmmm/citys'
import { questionType, direction, publishType, difficulty } from '@/api/hmmm/constants'
import { simple as getUserSimple } from '@/api/base/users'
import questionCheck from '../components/questions-check.vue'
import questionPreview from '../components/questions-preview.vue'
import questionTable from '../components/question-choice-table.vue'
export default {
  components: {
    questionCheck,
    questionPreview,
    questionTable
  },
  data() {
    return {
      subjectList: [], //学科列表
      catalogList: [], //目录列表
      tagsList: [], //标签列表
      tableData: [], //表格数据
      total: 0, //总条数
      activeName: 'all', //全部审核状态
      rousePreview: false, //预览弹窗显示隐藏
      checkVisible: false, //审核弹窗显示隐藏
      userList: [], //录入人
      questionItem: {},
      datas: {},

      //学科表单数据
      form: {
        subjectID: null,
        difficulty: null, //难度
        questionType: null, // 试题难度
        tags: null, //标签名称
        province: null, //企业所在地省份
        city: null, // 企业所在城市
        keyword: null, // 关键字
        remarks: null, //	题目备注
        shortName: null, // 企业简称
        direction: null, // 	方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
        chkState: null //审核状态
      },
      //分页
      params: {
        page: 1,
        pagesize: 5
      },
      // 城市
      cityData: {
        city: [],
        province: []
      },
      //试题类型
      questionChoise: {
        1: '单选',
        2: '多选',
        3: '简答'
      },
      difficultyChoise: {
        1: '简单',
        2: '一般',
        3: '困难'
      },
      //审核状态
      chkStateChoise: {
        0: '待审核',
        1: '已审核',
        2: '已拒绝'
      },
      //发布状态
      publishState: {
        1: '待发布',
        2: '已发布',
        3: '已下架'
      },
      //表头样式
      headerStyle: {
        width: '100%',
        color: '#909399',
        fontWeight: '500',
        backgroundColor: '#fafafa',
        borderBottom: '2px solid #e8e8e8'
      },
      questionType: questionType,
      direction: direction,
      publishType: publishType,
      difficulty: difficulty
    }
  },
  created() {
    this.getSubjectList()
    this.getquestionList()
    this.getCityData()
    this.getUser()
  },

  methods: {
    //获取简单学科
    async getSubjectList() {
      const { data: res } = await getSubjectsimple()
      this.subjectList = res
    },
    //获取二级目录
    async getCatalog() {
      const { data: res } = await getcatalogSimple({ subjectID: this.form.subjectID })
      this.catalogList = res
    },
    //获取标签列表
    async getTags() {
      const { data: res } = await getTagsSimple({ subjectID: this.form.subjectID })
      this.tagsList = res
    },
    // 获取省份
    getCityData() {
      this.cityData.province = provinces()
    },
    //获取城市 根据省份
    changeProvince(e) {
      this.cityData.city = citys(e)
    },
    //关联所有学科
    ChangeAllList() {
      this.getCatalog()
      this.getTags()
    },
    //获取精选题库列表
    async getquestionList() {
      const { data: res } = await getQuestion({
        ...this.form,
        page: this.params.page,
        pagesize: this.params.pagesize
      })
      this.tableData = res.items
      this.total = res.counts
    },
    handleClick() {
      switch (this.activeName) {
        case 'all':
          this.form.chkState = null // 全部状态
          this.getquestionList() // 重新获取列表
          break
        case '0':
          this.form.chkState = 0 // 待审核
          this.getquestionList() // 重新获取列表
          break
        case '1':
          this.form.chkState = 1 // 通过
          this.getquestionList() // 重新获取列表
          break
        case '2':
          this.form.chkState = 2 // 不通过
          this.getquestionList() // 重新获取列表
          break
      }
    },
    // 审核
    getchoiceCheck(item) {
      this.checkVisible = true
      this.questionItem = item
      this.getquestionList()
    },
    //精选题库上下架
    getchoicePublish(row, id) {
      const text = row.publishState === 1 ? '下架' : '上架'
      this.$confirm('您确认' + text + '这道题目?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await choicePublish({
            publishState: row.publishState ? 0 : 1,
            id: id
          })
          this.getquestionList()
          this.$message({
            type: 'success',
            message: text + '成功!'
          })
        })
        .catch(() => {})
    },
    //获取录入人
    async getUser() {
      const { data: res } = await getUserSimple({
        page: this.params.page,
        pagesize: this.params.pagesize,
        keyword: ''
      })
      this.userList = res
    },
    //格式化日期
    FormData(val) {
      return dayjs(val).format('YYYY-MM-DD HH:mm:ss')
    },
    //清空表单数据
    reset() {
      this.form = {}
      this.$refs.formRef.resetFields()
    },
    //
    //搜索内容
    search() {
      this.getquestionList()
    },
    //分页数
    handleSizeChange(pagesize) {
      this.params.pagesize = pagesize
      this.getquestionList()
    },
    //当前分页
    handleCurrentChange(page) {
      this.params.page = page
      this.getquestionList()
    },
    //显示弹窗
    async previewDialog(id) {
      const { data: res } = await detail({ id: id })
      this.datas = res
      this.rousePreview = true
    },
    //显示审核弹窗
    checkDialog() {
      this.checkVisible = true
    },
    //关闭
    closeDialog() {
      this.checkVisible = false
    },
    //删除题库
    remove(id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ ...this.form, ...this.params, id: id })
        if (this.tableData.length === 1 && this.params.page > 1) {
          this.params.pagesize--
        }
        this.$message.success('删除成功')
        this.getquestionList()
      })
    }
  }
}
</script>

<style scoped lang='scss'>
.questions-container {
  padding: 10px;
}
.el-col {
  span {
    display: block;
    padding-bottom: 15px;
  }
}
.btn-wrapper {
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .text {
    color: #ffc0cb;
    font-size: 12px;
  }
}
</style>
